> ## Documentation Index
> Fetch the complete documentation index at: https://sequence-0fb8d9e6-api_docs.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Migrate to v5 (Web SDK)

> Sequence Kit (v4) is now Web SDK (v5), here are the biggest changes.

<Note>
  React 19 is supported on Web SDK!
</Note>

## Installing new dependencies

All of our hook libraries have been renamed, here are the new dependencies you need to get started with Web SDK:

<CodeGroup>
  ```bash New  theme={null}
  npm install @0xsequence/connect @0xsequence/hooks wagmi ethers viem 0xsequence @tanstack/react-query
  # or
  pnpm install @0xsequence/connect @0xsequence/hooks wagmi ethers viem 0xsequence @tanstack/react-query
  # or
  yarn add @0xsequence/connect @0xsequence/hooks wagmi ethers viem 0xsequence @tanstack/react-query
  ```

  ```bash Old theme={null}
  npm install @0xsequence/kit @0xsequence/waas wagmi ethers viem 0xsequence @0xsequence/design-system@^1.9.0 motion @tanstack/react-query
  # or
  pnpm install @0xsequence/kit @0xsequence/waas wagmi ethers viem 0xsequence @0xsequence/design-system@^1.9.0 motion @tanstack/react-query
  # or
  yarn add @0xsequence/kit @0xsequence/waas wagmi ethers viem 0xsequence @0xsequence/design-system@^1.9.0 motion @tanstack/react-query
  ```
</CodeGroup>

## Configuring your app

Main differences when it comes to configuration:

<CodeGroup>
  ```tsx New theme={null}
  import React from "react";
  import ReactDOM from "react-dom/client";
  import "./index.css"; 

  import App from "./App";
  import { SequenceConnect } from "@0xsequence/connect";
  import { SequenceCheckoutProvider } from "@0xsequence/checkout"
  import { config } from "./config";

  function Dapp() {
    return (
      <SequenceConnect config={config}>
        <SequenceCheckoutProvider>
            <App />
        </SequenceCheckoutProvider>
      </SequenceConnect>
    );
  }

  ReactDOM.createRoot(document.getElementById("root")!).render(
    <React.StrictMode>
      <Dapp />
    </React.StrictMode>
  );
  ```

  ```tsx Old theme={null}
  import React from "react";
  import ReactDOM from "react-dom/client";
  import "./index.css";

  import App from "./App";
  import { SequenceKit } from "@0xsequence/kit";
  import { KitCheckoutProvider } from "@0xsequence/kit-checkout";
  import { config } from "./config";
  import '@0xsequence/design-system/styles.css'

  function Dapp() {
    return (
      <SequenceKit config={config}>
        <KitCheckoutProvider>
          <App />
        </KitCheckoutProvider>
      </SequenceKit>
    );
  }

  ReactDOM.createRoot(document.getElementById("root")!).render(
    <React.StrictMode>
      <Dapp />
    </React.StrictMode>
  );
  ```
</CodeGroup>

* `@0xsequence/kit` -> `@0xsequence/connect` for authentication
* `@0xsequence/kit` -> `@0xsequence/wallet-widget` for wallet UI
* `@0xsequence/kit-checkout` -> `@0xsequence/checkout`
* no need to manually import the `@0xsequence/design-system/styles.css` when using `@0xsequence/connect`
* `@0xsequence/connect` is compatible with `@0xsequence/design-system` v2
* `KitProvider` is now `SequenceConnectProvider`
* `KitCheckoutProvider` is now `SequenceCheckoutProvider`
* `KitWalletProvider` is now `SequenceWalletProvider`

## Connecting your app

<CodeGroup>
  ```tsx New theme={null}
  import './App.css'
  import { useOpenConnectModal } from '@0xsequence/connect'

  function App() {
    const {setOpenConnectModal} = useOpenConnectModal()
    
    return (
      <>
        <button onClick={() => setOpenConnectModal(true)}>Connect</button>
      </>
    )
  }

  export default App
  ```

  ```tsx Old theme={null}
  import './App.css'
  import { useOpenConnectModal } from '@0xsequence/kit'

  function App() {
    const {setOpenConnectModal} = useOpenConnectModal()
    
    return (
      <>
        <button onClick={() => setOpenConnectModal(true)}>Connect</button>
      </>
    )
  }

  export default App
  ```
</CodeGroup>

## Tailwind css

Web SDK uses Tailwind v4, if you are using Tailwind v3, you need to upgrade.